<template>
  <button @click="sendCodeBtn">
    {{ number === 0 ? "发送验证码" : `${number}秒后发送` }}
  </button>
</template>

<script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/shared'
export default {
  setup () {
    const number = ref(0)
    // resume 用于启动定时器的函数
    // pause  用于暂停定时器的函数
    const { resume, pause } = useIntervalFn(() => {
      console.log('vueuser的定时器运行中')
      number.value--
      if (number.value <= 0) {
        pause()
      }
    }, 100, { immediate: false })

    const sendCodeBtn = () => {
      number.value = 60
      resume()
    }
    return { number, sendCodeBtn }
  }
}
</script>

<style lang="less" scoped></style>
